<template>
  	<div id="createCourse">
        <!-- 就诊时间选择 -->
        <div class='mc' v-show='isTime' @click.stop='toggle(0)'></div>
        <div class='datetime'>
            <div class='top'>
                <a @click.stop='toggle(0)'>取消</a>
                <a @click.stop='sureTime'>确定</a>
            </div>
            <mt-picker :slots="slotsTime" @change="onValuesChangeTime"></mt-picker>
        </div>
  		<header>
  			<i @click="goBack()"></i>
  			<div v-if='status == "add"'>创建房间</div>
  			<div v-if='status == "edit"'>编辑房间</div>
  		</header>
  		<div class="border-8"></div>
	  	<div class="swiper-container swipe" id="outSwiper">
  			<div class="swiper-wrapper">
  				<div class="swiper-slide">
		        	<ul class='single'>
                        <li class='no-border'>
                            <a>
                                <label>选择直播类型:</label>
                                <span class='red'>保存后不可更改</span>
                            </a>
                            <a class="liveType">
                                <label @change="liveType()">
                                    <input type="radio" v-model="liveObj.iffree" value='free'>
                                    <i>免费</i>
                                </label>
                                <label @change="liveType()">
                                    <input type="radio" v-model="liveObj.iffree" value='charge'>
                                    <i>收费</i>
                                </label>
                            </a>
                            <a class="liveType">
                                <input type="text" @focus='focus($event)' placeholder="输入收费金额" v-model='liveObj.charge' 
                                :disabled='liveObj.iffree=="free"?true:false'>
                            </a>
                        </li>
				  		<li>
				  			<a>
								<label>直播主题:</label>
					 			<input type="text" placeholder="请输入直播主题" v-model='liveObj.live_name' />
				  			</a>
				  		</li>
				  		<li @click='toggle(1)'>
				  			<a>
								<label>开始时间:</label>
					 			<div class='time'>{{liveObj.live_starttime || "请选择开播时间"}}</div>
				  			</a>
				  		</li>
				  		<li>
				  			<a class="descTitle">
								<label>课程介绍:</label>
				  			</a>
				  		</li>
				  		<li class="">
				  			<a class="courseDesc">
				  				<textarea placeholder="请输入课程介绍" v-model='liveObj.content' @focus='focus($event)'></textarea>
				  			</a>
				  		</li>
				  		<li class='no-border'>
				  			<a class="uploadImg">
								<div class="img">
									<img class="selectImg" :src="liveObj.live_pic" width="50" height="50" />
								</div>
								<div class="upfileDiv">
									<el-upload
					                  class="avatar-uploader"
					                  :action='$api.baseURLUpload+"/photos/upload_shop"'
					                  :show-file-list="false"
					                  :on-success="(res,file)=>{
					                    return handleAvatarSuccess(res,file,1)
					                  }"
					                  :before-upload="beforeAvatarUpload">
					                  <img v-if="!liveObj.live_pic" :src="liveObj.live_pic" class="avatar">
					                  <i v-else class="avatar-uploader-icon"></i>
					                </el-upload>
								</div>

				  			</a>
				  		</li>
				  		<div class="border-8"></div>
				  		<li>
				  			<a @click='finish' class="nextStep">
				  				完 成
				  			</a>
				  		</li>
				  	</ul>
		        </div>
		    </div>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
			return {
                liveObj: {
                    id: localStorage.getItem("loginMobile"), 
                    iffree: 'free',
                    charge: '',
                    live_name: '',
                    live_starttime: '',
                    content: '',
                    live_pic: require('../../image/bg_pic.png'),  //封面
                },
                valuestime: '',  //开播时间选择但未确定时的选项
                isTime: false,  //是否显示时间选择器
                slotsTime: [
                    {
                        flex: 1,
                        values: function() {
                            const date=new Date();
                            const year = date.getFullYear(); 
                            const yearArr = [];
                            for(var i = year;i< year+10;i++) {
                                yearArr.push(i);
                            }
                            return yearArr;
                        }(),
                        className: 'slot1',
                        textAlign: 'center'
                    }, 
                    {
                        flex: 1,
                        values: function() {
                            const monthArr = [];
                            for(var i = 1;i< 13;i++) {
                                if(i < 10) {
                                    monthArr.push('0' + i);
                                } else {
                                    monthArr.push(i);
                                }
                                
                            }
                            return monthArr;
                        }(),
                        className: 'slot2',
                        textAlign: 'center'
                    },
                    {
                        flex: 1,
                        values: function() {
                            const dayArr = [];
                            for(var i = 1;i< 32;i++) {
                                if(i < 10) {
                                    dayArr.push('0' + i);
                                } else {
                                    dayArr.push(i);
                                }
                                
                            }
                            return dayArr;
                        }(),
                        className: 'slot3',
                        textAlign: 'center'
                    },
                    {
                        flex: 1,
                        values: function() {
                            const hourArr = [];
                            for(var i = 0;i< 24;i++) {
                                if(i < 10) {
                                    hourArr.push('0' + i);
                                } else {
                                    hourArr.push(i);
                                }
                                
                            }
                            return hourArr;
                        }(),
                        className: 'slot4',
                        textAlign: 'center'
                    },
                    {
                        flex: 1,
                        values: function() {
                            const minArr = [];
                            for(var i = 0;i< 60;i++) {
                                if(i < 10) {
                                    minArr.push('0' + i);
                                } else {
                                    minArr.push(i);
                                }  
                            }
                            return minArr;
                        }(),
                        className: 'slot5',
                        textAlign: 'center'
                    }
                ],
                status: '',  //add | edit
			}
		},
		components: {

		},
		methods: {
            init() {
                if(this.liveObj.id) {
                    this.$api.get(this.$api.baseURLSchool,"select_cid/live_room/"+this.liveObj.id,{},r => {
                        // console.log(r);
                        if(r.data.ret == 1) {
                            this.status = 'edit';
                            this.liveObj = r.data.info;
                        } else {
                            this.status = 'add';
                        }
                    },err => {
                        console.log(err);
                    })
                }
            },
            // 控制日期选择器显示隐藏动画
            toggle(status) {  //status 0隐藏 1显示
				if(status) {
					this.isTime=true;
					$(".datetime").addClass("up").removeClass("down");
				}else {
					$(".datetime").addClass("down").removeClass("up");
                    this.isTime=false;
				}
			},
            //开播时间
            onValuesChangeTime(picker, values) {
                this.valuestime = values[0] + '-' +values[1] + '-' +values[2] + ' ' +values[3] + ':' +values[4];
                console.log(values);
                function mGetDate(year, month){
                    var d = new Date(year, month, 0);
                    return d.getDate();
                }
                var totalDay = mGetDate(values[0],values[1]);   //29 
                const dayArr = [];
                for(var i=1;i<totalDay+1;i++) {
                    if(i < 10) {
                        dayArr.push('0' + i);
                    } else {
                        dayArr.push(i);
                    }
                }
                picker.setSlotValues(2, dayArr)
            },
            //确定开播时间
            sureTime() {
                this.liveObj.live_starttime = this.valuestime;
                this.toggle(0);
            },
			//上传图片  i 1是单节课图 2是系列课图
            handleAvatarSuccess(res, file, i) {
                if(res.state == 200) {
                	console.log(res);
                	if(i==1) {
                		this.liveObj.live_pic = res.result_origin;
                	}
                }
            },
            beforeAvatarUpload(file) {
                if(!/image\/\w+/.test(file.type)) {
                    this.$utils._toast('请确保文件为图像类型');
                    return false;
                }
                if(file.size > 5 * 1024 * 1024) {
                    this.$utils._toast('上传图片不能超过5M');
                    return false;
                }
            },
			goBack() {
				this.$router.back();
			},
			focus(e) {
				setTimeout(function() {
					e.target.scrollIntoView(true);
				},200);
			},
		    // 完成
		    finish() {
                // console.log(this.liveObj);
                if(this.liveObj.iffree == 'charge') {
                    if(!this.liveObj.charge) {
                        this.$utils._toast('请输入收费金额');
                        return false;
                    }
                }
                var reg = /^[0-9]\d*(\.\d{1,2})?$/g;
                if(!reg.test(this.liveObj.charge)&&this.liveObj.charge) {
                    this.$utils._toast("收费金额格式不正确");
                    return false;
                }
                if(!this.liveObj.live_name) {
                    this.$utils._toast('请输入直播主题');
                    return false;
                }
                if(!this.liveObj.live_starttime) {
                    this.$utils._toast('请选择开播时间');
                    return false;
                }
                if(!this.liveObj.content) {
                    this.$utils._toast('请输入课程介绍');
                    return false;
                }
                if(!this.liveObj.live_pic) {
                    this.$utils._toast('请选择直播封面');
                    return false;
                }
                this.$api.post(this.$api.baseURLSchool,"update_live_room/"+this.status,this.liveObj,r => {
                    console.log(r);
                    if(r.data.ret == 1) {
                        this.$utils._toast("保存成功");
                        setTimeout(() => {
                            this.$router.back();
                        },300);
                    }
                },err => {
                    console.log(err);
                })
		    },

		    liveType() {
                // console.log(this.liveObj.iffree);
                if(this.liveObj.iffree == 'free') {
                    this.liveObj.charge = '';
                }
		    },
			upfile1: function() {
				var file = $(".upfile")[0].files[0];
				//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
				if(!/image\/\w+/.test(file.type)) {

					this.$utils._toast('请确保文件为图像类型');

					return false;
				}
				if(file.size > 5 * 1024 * 1024) {
					this.$utils._toast('上传图片不能超过5M');
					return false;
				}
				var _this = this;
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					var result = this.result;
					// console.log(result);
					_this.singleUrl1 = result;
					
				}
			},
		},
		created() {
            this.init();
		},
		mounted() {
			
		}
	}
</script>
<style lang="scss">
</style>
